<template>
	<view class="">
		<u-navbar leftIcon=" " title="查专利"></u-navbar>
		<u-search 
			placeholder="请输入关键字" 
			v-model="searchName" 
			inputAlign="center"
			shape="round"
			:showAction="true" actionText="搜索" :animation="false"
			borderColor="#bbb"
			@focus="jump"
			@custom="custom()"
		></u-search>
		<template v-if="isSearch">
			<view class="result">
				<text>搜索结果：</text>
				<view class="">				
					<text>总计</text>
					<text class="result-1">{{total}}</text>
					<text>条</text>
				</view>
			</view>
			<view class="content" v-for="item in patents" :key="item.applicationCode">
				<view class="flex-col list-item" @click="jumpDetails(item)">
				  <text class="font_2 text_6">{{item.patentName}}</text>
				  <view class="flex-row justify-around group_4">
					<text class="font_3 text_7">公开（公告）号：</text>
					<text class="font_4 text_8">{{item.publicationCode}}</text>
					<view class="flex-col items-center text-wrapper_2"><text class="font_5">{{[' ','发明','实用','外观'][item.patentType]}}</text></view>
					<view class="flex-col items-center text-wrapper view_20"><text class="font_6 text_9 text_45">{{cases[item.legalStatus]}}</text></view>
				  </view>
				  <view class="flex-row group_5">
					<text class="font_3 text_10">公开（公告）日：</text>
					<text class="font_4 text_11">{{item.publicationDate || '-'}}</text>
				  </view>
				  <view class="flex-row group_6">
					<text class="font_3">申请号：</text>
					<text class="font_4 text_12">{{item.applicationCode || '-'}}</text>
				  </view>
				  <view class="flex-row space-x-7 group_7">
					<text class="font_3">申请日：</text>
					<text class="font_4 text_13">{{item.applicationDate || '-'}}</text>
				  </view>
				  <view class="flex-row space-x-6 group_8">
					<text class="font_3 text_14">申请（专利权）人：</text>
					<text class="font_7 text_15 text_46">{{item.assigneeName || '-'}}</text>
				  </view>
				  <view class="flex-row space-x-7 group_9">
					<text class="font_3 text_17 text_47">主分类号：</text>
					<text class="font_8 text_19">{{item.mainClassification || '-'}}</text>
				  </view>
				</view>
			</view>
			<view class="flex-row justify-center more" @click="getInitData('more')" v-if="patents.length >= 6">
			  <!-- <image
				class="image_7"
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16647067180013169789.png"
			  /> -->
			  <text class="font_12 text_49">加载更多</text>
			</view>
		</template>
		<template v-else>
			<searchp @sarchInfo="search"></searchp>
		</template>
		<u-empty v-if="!patents.length" class="empty-data">
		</u-empty>
	</view>
</template>

<script>
	import {getSearchPatent} from '@/api/indexData.js'
	import searchp from '../../components/searchPatent.vue' 
	export default {
		components:{searchp},
		data() {
			return {
				searchName:'',
				isSearch:true,
				isShowAction:false,
				total:0,
				patents:[],
				indexSign:1,
				condition:{
					pageSize:10,
					pageNo:1,
				},
				cases:['其他','专利公布','实质审查','权利授予','专利撤回','专利放弃']
			};
		},
		onLoad() {
			// this.getInitData();
		},
		onTabItemTap(){
			this.searchName = '';
			this.condition.searchName = '';
			this.getInitData();
		},
		methods:{
			getInitData(type){
				if(type) {
					this.indexSign += 1;
				}
				this.condition.pageSize *= this.indexSign;
				getSearchPatent(this.condition).then(res => {
					if(res.code === 200) {
						this.patents = res.data.content;
						this.total = res.data.total;
					}
				})
			},
			jump() {
				this.isSearch = false;
			},
			search(value){
				this.isSearch = true;
				this.searchName = value;
				this.condition.searchName = value;
				this.getInitData();
			},
			custom(){
				let infos = this.$store.getters.getSearchInfo || [];
				if(!infos.includes(this.searchName) && this.searchName) {
					infos.push(this.searchName);
					this.$store.commit('setSearchInfo',infos);
				}
				
				this.isSearch = true;
				if(this.searchName) {
					this.condition.searchName = this.searchName;
				}else this.condition.searchName = ''
				this.getInitData();
			},
			jumpDetails(item){
				let info = JSON.stringify(item)
				uni.navigateTo({
					url: `../searchPatent/patentDetails?info=${info}`
				});
			}
		}
	}
</script>

<style lang="scss">
.result {
	font-size: 26rpx;
	color: $uni-color-middle;
	margin-top: 46rpx;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	.result-1 {
		color: #f43738;
		margin: 0 8rpx;
	}
}
.content {
	border-bottom: 20rpx solid #fafafa;
	.list-item {
	  padding: 31rpx 30rpx 32rpx;
	  background-color: #ffffff;
	  .font_2 {
	    font-size: 30rpx;
	    font-family: Microsoft YaHei;
	    line-height: 29rpx;
	    color: #5677fc;
	  }
	  .text_6 {
	    align-self: flex-start;
		width:100%;
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		// -o-text-overflow:ellipsis;
	  }
	  .group_4 {
	    margin-top: 19rpx;
	    .text_7 {
	      margin-bottom: 4rpx;
	      line-height: 27rpx;
		  margin-left: -10rpx;
	    }
	    .text_8 {
	      margin: 4rpx 0 7rpx;
	    }
	    .text-wrapper_2 {
	      margin-bottom: 4rpx;
	      padding: 4rpx 0 4rpx;
	      background-color: #ffffff;
	      border-radius: 4rpx;
	      width: 70rpx;
	      height: 30rpx;
	      border: solid 1rpx #2f87f2;
	      .font_5 {
	        font-size: 19rpx;
	        font-family: Microsoft YaHei;
	        line-height: 18rpx;
	        color: #2f87f2;
	      }
	    }
	    .text-wrapper {
	      padding: 7rpx 0 6rpx;
	      background-color: #ececec;
	      border-radius: 16rpx;
	      width: 140rpx;
	      height: 32rpx;
	      .font_6 {
	        font-size: 19rpx;
	        font-family: Microsoft YaHei;
	        line-height: 18rpx;
	        color: #ffa529;
	      }
	      .text_9 {
	        font-size: 20rpx;
	        line-height: 19rpx;
	      }
	      .text_45 {
	        line-height: 22rpx;
	      }
	    }
	    .view_20 {
	      // padding: 7rpx 0;
		  margin-top: -2rpx;
	      background-color: #f5f5f5;
	    }
	  }
	  .group_5 {
	    margin-top: 20rpx;
	    .text_10 {
	      line-height: 27rpx;
	    }
	    .text_11 {
	      margin: 3rpx 0 3rpx 6rpx;
	    }
	  }
	  .font_3 {
	    font-size: 26rpx;
	    font-family: Microsoft YaHei;
	    line-height: 26rpx;
	    color: #777777;
	  }
	  .font_4 {
	    font-size: 26rpx;
	    font-family: Microsoft YaHei;
	    line-height: 21rpx;
	    color: #444444;
	  }
	  .group_6 {
	    margin-top: 24rpx;
	    padding: 0 3rpx;
	    .text_12 {
	      margin-top: 3rpx;
	    }
	  }
	  .space-x-7 {
	    & > view:not(:first-child),
	    & > text:not(:first-child),
	    & > image:not(:first-child) {
	      margin-left: 7rpx;
	    }
	    .text_13 {
	      margin-top: 4rpx;
	    }
	    .text_17 {
	      margin-bottom: 3rpx;
	    }
	    .text_47 {
	      margin-bottom: initial;
	    }
	    .font_8 {
	      font-size: 26rpx;
	      font-family: Microsoft YaHei;
	      line-height: 24rpx;
	      color: #444444;
	    }
	    .text_19 {
	      margin-top: 4rpx;
	    }
	  }
	  .group_7 {
	    margin-top: 27rpx;
	    padding: 0 2rpx;
	  }
	  .space-x-6 {
	    & > view:not(:first-child),
	    & > text:not(:first-child),
	    & > image:not(:first-child) {
	      margin-left: 6rpx;
	    }
	    .text_14 {
	      line-height: 27rpx;
	    }
	    .font_7 {
	      font-size: 26rpx;
	      font-family: Microsoft YaHei;
	      line-height: 26rpx;
	      color: #444444;
	    }
	    .text_15 {
	      line-height: 27rpx;
	    }
	    .text_46 {
	      line-height: initial;
	    }
	  }
	  .group_8 {
	    margin-top: 27rpx;
	    padding: 0 2rpx;
	  }
	  .group_9 {
	    margin-top: 25rpx;
	  }
	}
}
.more {
	width: 100%;
	height: 88rpx;
	line-height: 80rpx;
	background: #fff;
	align-items: center;
	.image_7 {
	  width: 20rpx;
	  height: 20rpx;
	}
	.font_12 {
	  font-size: 32rpx;
	  font-family: Microsoft YaHei;
	  line-height: 18rpx;
	  color: #666666;
	}
	.text_48 {
	  margin-left: 12rpx;
	}
	.text_49 {
	  margin-left: 2rpx;
	}
}
</style>
